<template>
    <div>
        <link rel="stylesheet" href="css/swiper.min.css">
        <div class="seamlesswrap">
            <!-- 1.swiper无缝轮播 -->
            <div class="swiper-container seamless01-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in swiperlist">
                        <img :src="item.img" />
                    </div>
                </div>
            </div>
            <div class="swiper-container seamless02-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in swiperlist">
                        <img :src="item.img" />
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>


import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
export default {
    name: 'HelloWorld',
    components: {
    },
    data() {
        return {
            ismobile: false,
            swiperlist: [
                {
                    img: require('../../assets/images/8-514-639.jpg')
                }, {
                    img: require('../../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../../assets/images/8-514-639.jpg')
                }, {
                    img: require('../../assets/images/8-514-639.jpg')
                }, {
                    img: require('../../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../../assets/images/8-514-639.jpg')
                },
                {
                    img: require('../../assets/images/8-514-639.jpg')
                }],
        }
    },
    mounted() {
        var mySwiper = new Swiper('.seamless01-swiper', {
            observer: true,  //开启动态检查器，监测swiper和slide
            observeParents: true,  //监测Swiper 的祖/父元素
            speed: 6 * 1000,//切换速度
            loop: true,//循环
            slidesPerView: 3,//显示数量
            spaceBetween: 10,//间隔
            freeMode: true,//自动贴合
            autoplay: {//自动播放
                delay: 0,//自动切换的时间间隔
                stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
                disableOnInteraction: false,//用户操作后是否停止
            },
            breakpoints: {
                750: {  //当屏幕宽度大于等于320
                    slidesPerView: 6,
                },
            }
        });
        var mySwiper = new Swiper('.seamless02-swiper', {
            // observer: true,  //开启动态检查器，监测swiper和slide
            // observeParents: true,  //监测Swiper 的祖/父元素
            speed: 6 * 1000,//切换速度
            loop: true,//循环
            slidesPerView: 3,//显示数量
            spaceBetween: 10,//间隔
            // freeMode: true,//自动贴合
            autoplay: {//自动播放
                delay: 0,//自动切换的时间间隔
                // stopOnLastSlide: false,//切换到最后一个slide时停止自动切换
                disableOnInteraction: false,//用户操作后是否停止
                reverseDirection: true,//方向切换
            },
            breakpoints: {
                750: {  //当屏幕宽度大于等于320
                    slidesPerView: 6,
                },
            }
        });
    }
}
</script>
<style lang="scss" scoped>
/* seamlesswrap */
.seamlesswrap {
    width: 100%;
    box-sizing: border-box;
    // padding: 200px;
}

.seamlesswrap img {
    width: 100%;
    display: block;
}

.seamlesswrap .swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.seamlesswrap .swiper-container {
    margin: 10px 0;
}
</style>